<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>

    <script>
       const {reactive, effect} = VueReactivity;
    //    const s = reactive({a:{b:{d:1}}});
    //    console.log(s.a.b); // 深层的用到了s.a.b才会代理到
    //    console.log(s);


    let state = reactive({name:1,ays:[1,2,3],b:{}})
    effect(()=>{
        console.log("ek++");
        document.body.innerHTML = state.name;
    })

    // console.log(state.ays.length);
    
    // console.log(state);

    setTimeout(() => {
        state.name = 'elk'; // 修了state让effect重新执行
        state.name = 'elks'; // 修了state让effect重新执行
        // state.test = 1;
        // debugger;
        // state.b = {};
        // state.ays.push(1,2);
        
    })
    </script>
</body>
</html>